<template>
  <div class="table-box">
    <el-form ref="form" :model="form" label-width="120px">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="客户信息" name="1">

          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="选择客户">
                <el-col :span="20">
                  <template>
                    <el-select v-model="form.client_id" multiple filterable remote reserve-keyword placeholder="请输入关键词"
                      :remote-method="remoteMethod" :loading="loading">
                      <el-option v-for="item in options" :key="item.value" @clieck="alert(1)" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-col>

          合同基础信息
          <br>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="合同名称">
                <el-col :span="20">
                  <el-input v-model="form.title" placeholder="输入合同名称" />
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="业务类型">
                <el-select v-model="form.type1" @change="getTypeList()" placeholder="输选择业务类型">
                  <el-option label="顾问业务" value="顾问业务"></el-option>
                  <el-option label="咨询业务" value="咨询业务"></el-option>
                  <el-option label="鉴证业务" value="鉴证业务"></el-option>
                  <el-option label="代理业务" value="代理业务"></el-option>
                  <el-option label="其他业务" value="其他业务"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="细分业务类型">
                <el-select v-model="form.type2" placeholder="输选择业务类型">
                  <el-option v-for="item in typeList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>

        </el-collapse-item>






      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="clickConfirm">确 定</el-button>
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
  </div>
</template>
    
<script>
import contractApi from '@/api/contract'
import clientApi from '@/api/client'

export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [],


      activeNames: ['1', '2', '3'],
      restaurants: [],
      state: '',
      timeout: null,

      typeList: [],

      form: {

      },

      value2: '',
    };
  },
  methods: {

    // 点击弹窗确定按钮
    clickConfirm() {

      const that = this;
      const p = {
        // .. 参数
      }


      contractApi.clientFrom(this.form).then(response => {
        this.$message({
          message: response.message,
          type: 'success'
        });
        that.dialogFormVisible = false;

        this.$router.push('/contract/contractIndex')
      }).catch(e => {
        loading.close();
        console.log(e)
      })

    },

    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    getTypeList() {
      let self = this;
      contractApi.getTypeList(self.form.type1).then(response => {
        this.typeList = response.data.list;
      })
    },

    loadAll() {
      clientApi.getAllClient().then(response => {
        this.list = response.data.list.map(item => {
          return { value: `${item['id']}`, label: `${item['name']}` };
        });
      })
    },


    handleChange(val) {
      // console.log(val);
    },
    // 添加联系人--选中功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击增加
    clickAdd() {
      const tableData = this.form.tableData;
      tableData.push({
        name: '',
        appellation: '',
      })
      this.form.tableData = tableData;
    },
    // 点击减号
    clickMinus() {
      const tableData = this.form.tableData;
      if (tableData.length == 1) {
        return
      } else {
        tableData.pop()
      }
      this.form.tableData = tableData;
    },
  },
  created() {
    var query = this.$route.query;
    if (query.id) {
      contractApi.getInfo(query.id).then(response => {
        this.form = response.data.info;
      })
    }
  },
  mounted() {
    this.loadAll();
  }
};
</script>
    
<style>
.table-box {
  width: 100%;
  height: 1500px;
  background: #FFFFFF;
  box-shadow: 0px 1px 16px 0px rgba(202, 204, 204, 0.65);
  border-radius: 4px;
  padding: 50px 16px 16px 100px;
}

.collapse2-titlebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapse2-titlebox-t {
  font-size: 12px;
  color: #666;
}

.collapse2-title-right {
  display: flex;
  align-items: center;
}

.collapse2-title-right>span {
  font-size: 15px;
  font-weight: bold;
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #fff;
  line-height: 1 !important;
  cursor: pointer;
}

.collapse2-title-right>span.jia {
  background: #409eff;
}

.collapse2-title-right>span.jian {
  background: #999;
}

.collapse2-listbox ::v-deep .el-input__inner {
  /* height: 30px; */
  /* line-height: 30px; */
}
</style>